<template>
	<view class="getCouponPage">
		<view class="receive-coupon">
			<view class="card-centent-box" 
				:style="{backgroundImage: 'url(https://yuyitang.oss-cn-shenzhen.aliyuncs.com/yytfile/upload/2022/06/01/e5abf31c-fd00-4fd0-8c2c-47a7aff3c77f.png)', backgroundSize: '100% 100%'}">
				<view class="left-card-box">
					<view class="coupon-title-text">
						{{data.couponName}}
					</view>
					<view class="coupon-content-text" v-if="data.reduceType == '1'">
						抵消金额：<span style="color: red; font-size: 32rpx; font-weight: bold;">￥ {{data.amount}}</span>
					</view>
					<view class="coupon-content-text" v-if="data.reduceType == '2'">
						折扣力度：<span style="color: red; font-size: 32rpx; font-weight: bold;"> {{data.discount * 100}}（折）</span>
					</view>
					<view class="coupon-content-text">
						发行数量：{{data.publishCount}}
					</view>
					<view class="coupon-content-text">
						有效期至：{{data.endTime.split(' ')[0]}}
					</view>
				</view>
				<view v-if="isValid" class="right-card-box" @click="userGetCoupon(data)">
					<view class="sharing-btn" >领取</view>
				</view>
				<view v-if="!isValid" class="right-card-box" >
					<view class="sharing-btn"  style="color: gray;">不可领取</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				couponId: '',
				data: {},
				// 有效期
				isValid: true
			}
		},
		onLoad(e) {
			this.couponId = e.id,
			this.$api.request.getCouponById({
				id: e.id
			}, res => {
				if(res.code == 200){
					this.data = res.data
					// 是否禁用
					if(res.data.startStatus == 0){
						this.isValid = false
					}
					// 是否在可领取有效期
					if(new Date(res.data.enableEndTime).getTime() < new Date().getTime()){
						this.isValid = false
					}
				}
			})
		},
		computed: {
			...mapState(['hasLogin', 'userInfo', 'footPrint', 'applicationConfig', 'token', 'session_key', 'openid']),
		},
		methods: {			
			userGetCoupon(data) {
				const that = this
				if (!this.hasLogin) {
					const that = this
					uni.getUserProfile({
						desc: "获取你的昵称、头像、地区及性别",
						success: (res) => {
							console.log(res);
							uni.showLoading({
								//title: '加载中'
							});
							this.$api.request.userLoginOrAdd({
								encryptedData: res.encryptedData,
								iv: res.iv,
								sessionKey: this.session_key,
								wechatId: uni.getStorageSync('openId'),
								sourceType: "APP",
								nickName: res.userInfo.nickName,
								avatarUrl: res.userInfo.avatarUrl
							}, resp => {
								console.log(resp);
								uni.hideLoading();
								if (resp.code == 200) {
									this.$store.commit("setToken", resp.data.tokenValue)
									this.$store.commit("login", resp.data);
									uni.setStorageSync('authStatus', true)
									this.$api.request.userInfo({}, res => {
										if (res.code == 200) {
											uni.setStorageSync('userInfo', res.data)
											// 领取
											that.$api.request.userGetCoupon({
												couponId: data.id,
												perLimit: data.perLimit,
												memberId: res.data.id,
												memberNickName: res.data.nickname,
												getType: 1,
												useType: 0
											}, res => {
												if(res.code == 200){
													if(res.data == false){
														that.isValid = false
														uni.showToast({
															title: '不可重复领取',
															icon: 'none'
														})
														setTimeout(() => {
															console.log("延迟");
														}, 2000)
													}else {
														setTimeout(() => {
															uni.showToast({
																title: '领取成功',
																icon: 'success'
															})
															setTimeout(() => {
																uni.switchTab({
																	url: '/pages/sys/home/index'
																})
															},2000)
														}, 10)
														
													}
												}else{
													uni.showToast({
														title: '领取失败',
														icon: 'error'
													})
													setTimeout(() => {
														console.log("延迟");
													}, 2000)
												}
											})
										}
									})
				
								}
							})
						}
					})
				} else {
					// 领取
					this.$api.request.userGetCoupon({
						couponId: data.id,
						perLimit: data.perLimit,
						memberId: uni.getStorageSync('userInfo').id,
						memberNickName: uni.getStorageSync('userInfo').nickname,
						getType: 1,
						useType: 0,
					}, res => {
						if(res.code == 200){
							if(res.data == false){
								that.isValid = false
								uni.showToast({
									title: '不可重复领取',
									icon: 'none'
								})
								setTimeout(() => {
									console.log("延迟");
								}, 2000)
							}else {
								setTimeout(() => {
									uni.showToast({
										title: '领取成功',
										icon: 'success'
									})
									setTimeout(() => {
										uni.switchTab({
											url: '/pages/sys/home/index'
										})
									}, 2000)
								}, 10)
							}
						}else{
							uni.showToast({
								title: '领取失败',
								icon: 'error'
							})
							setTimeout(() => {
								console.log("延迟");
							}, 2000)
						}
					})
				}
			}
		}
	}
</script>

<style>
	.getCouponPage{
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, .6);
		background-image: url('https://yuyitang.oss-cn-shenzhen.aliyuncs.com/ytfile/upload/2022/04/22/huabanimg.gif');
		background-size: 100% 100%;
	}
	
	.receive-coupon {
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.card-centent-box{
		width: 90vw;
		height: 200rpx;
		margin: auto 30rpx;
		display: flex;
		flex-direction: row;
		border-radius: 30rpx;
		border-top: 1rpx solid rgba(0, 0, 0, 0.1);
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
		border-left: 1rpx solid rgba(0, 0, 0, 0.1);
		background-repeat: no-repeat;
	}
	
	.left-card-box{
		width: 64%;
		height: 200rpx;
		display: flex;
		flex-direction: column;
		align-content: space-around;
		padding-left: 20rpx;
	}
	
	.right-card-box {
		width: 36%;
		height: 200rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 42rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 30px;
		margin-right: 20rpx;
	}
	
	.coupon-title-text {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 30rpx;		
		padding-top: 25rpx;
		margin-bottom: 10rpx;
	}
	
	.coupon-content-text{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #828282;
		line-height: 30rpx;
		margin-bottom: 10rpx;
	}
	
	.sharing-btn {
		color: #FFFFFF;
		background: none;
		border: none;
	}
</style>